<template>
  <div>
    <div class="form-box">
      <form @submit='formSubmit'>
        <span class="s1">登录</span>
        <input type="text" name="phone" placeholder="请输入手机号">
        <input type="password" name="password" placeholder="请输入密码">
        <button form-type='submit'>登录</button>
        <span class="s2" @click="toFindPassword">忘记密码</span>
        <span class="s3" @click="toRegister">注册</span>
      </form>
      
    </div>
  </div>
</template>


<script>
 import request from '../../utils/request' 
  export default{
    data(){
      return {
        
      }
    },
    methods: {
      toRegister(){
        wx.navigateTo({
          url:'/pages/register/main'
        })
      },
      toFindPassword(){
        wx.navigateTo({
          url:'/pages/findPassword/main'
        })
      },
      async formSubmit(e){
        let data=e.mp.detail.value;
        console.log(data)
        let user = await request('/user/login',{data},'POST');
        console.log(user)
        if(user===0){
          wx.showToast({
            title: '用户不存在',
            duration: 5000
          })
        }else if(user===1){
          wx.showToast({
            title: '密码错误',
            duration: 5000
          })
        }else{
          wx.showToast({
            title: '登陆成功',
            duration: 5000
          })
          wx.setStorageSync('user',user)
          wx.navigateBack({
            delta: 1
          })
        }
      }
    },
    mounted() {
      
    },
  }
</script>

<style scoped>
.form-box{
  border:1px rgb(233, 209, 209) solid;
  margin:auto;
  margin-top:20px;
  width:90%;
  height:300px;
  box-shadow: -10px 10px rgb(233, 209, 209);
}

.form-box .s1{
  margin-left: 150px;
  font-size: 23px;
  color: red;
}
.form-box input{
  border-bottom: 1px solid rgb(223, 197, 197);
  margin:25px;

}
.form-box button{
  background: red;
  color:white;
  margin:20px;
}
.form-box .s2{
  color: rgb(102, 102, 92);
  display: inline-block;
  margin-left:20px;
}
.form-box .s3{
  color: rgb(102, 102, 92);
  display:inline-block;
  margin-left:190px;

}
</style>
 